<template>
    <div class="background-container">
      <canvas ref="canvas"></canvas>
      <img src="@/assets/images/start-page/shouye.png" alt="Hand" class="hand-image" />
      <!-- 替换成实际手掌图片路径 -->
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from "vue";
  
  const canvasRef = ref(null);
  const ctx = ref(null);
  let stars = [];
  let planets = [];
  let animationFrame;
  
  class Star {
    constructor(width, height) {
      this.x = Math.random() * width;
      this.y = Math.random() * height;
      this.size = Math.random() * 1.5 + 0.5;
      this.opacity = Math.random();
      this.twinkleSpeed = Math.random() * 0.02;
    }
  
    update() {
      this.opacity += this.twinkleSpeed;
      if (this.opacity > 1 || this.opacity < 0) {
        this.twinkleSpeed = -this.twinkleSpeed;
      }
    }
  
    draw(ctx) {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
      ctx.fill();
    }
  }
  
  class Planet {
    constructor(x, y, size, color) {
      this.x = x;
      this.y = y;
      this.size = size;
      this.color = color;
      this.offset = Math.random() * Math.PI * 2;
      this.amplitude = Math.random() * 3 + 2;
      this.speed = 0.02;
    }
  
    update() {
      this.offset += this.speed;
    }
  
    draw(ctx) {
      const x = this.x + Math.sin(this.offset) * this.amplitude;
      const y = this.y + Math.cos(this.offset) * this.amplitude;
  
      ctx.beginPath();
      ctx.arc(x, y, this.size, 0, Math.PI * 2);
      ctx.fillStyle = this.color;
      ctx.fill();
  
      // 星环 (如果需要)
      if (this.color === "orange") {
        ctx.strokeStyle = "rgba(255, 165, 0, 0.5)";
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.ellipse(x, y, this.size + 5, this.size + 2, 0, 0, Math.PI * 2);
        ctx.stroke();
      }
    }
  }
  
  const startAnimation = () => {
    const canvas = canvasRef.value;
    ctx.value = canvas.getContext("2d");
  
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  
    // 初始化星辰
    stars = Array.from({ length: 100 }, () => new Star(canvas.width, canvas.height));
  
    // 初始化行星
    planets = [
      new Planet(canvas.width * 0.6, canvas.height * 0.4, 15, "orange"),
      new Planet(canvas.width * 0.68, canvas.height * 0.5, 12, "blue"),
      new Planet(canvas.width * 0.63, canvas.height * 0.3, 10, "purple"),
    ];
  
    const animate = () => {
      ctx.value.clearRect(0, 0, canvas.width, canvas.height);
  
      // 绘制星辰
      stars.forEach((star) => {
        star.update();
        star.draw(ctx.value);
      });
  
      // 绘制行星
      planets.forEach((planet) => {
        planet.update();
        planet.draw(ctx.value);
      });
  
      animationFrame = requestAnimationFrame(animate);
    };
  
    animate();
  };
  
  const stopAnimation = () => {
    cancelAnimationFrame(animationFrame);
  };
  
  onMounted(() => {
    startAnimation();
  
    window.addEventListener("resize", startAnimation);
  });
  
  onUnmounted(() => {
    stopAnimation();
  
    window.removeEventListener("resize", startAnimation);
  });
  </script>
  
  <style scoped>
  .background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom, #0e1d3a, #000);
  }
  
  canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  
  .hand-image {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    z-index: 1; /* 保证在星空前面 */
    pointer-events: none;
  }
  </style>
  